@import (reference) 'icons';
@import (reference) '../../app/less/app';

.no-backup-no-money {
  .icon {
    background: @slide-backup-icon no-repeat center center;
    background-size: cover;
    width: 260px;
    height: 216px;
    margin: 0 auto 25px;
  }
}

.no-backup-no-money-modal {
  padding: 40px 50px 0 50px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: center;

  //FF ignores padding bottom fix
  &::after {
    content: '';
    min-height: 40px;
    display: block;
    position: relative;
    width: 100%;
  }

  .icon {
    background: @slide-seed-icon no-repeat center center;
    width: 106px;
    height: 106px;
    min-height: 106px;
    margin: 0 auto 30px;
  }

  w-button {
    width: 224px;
    margin: 40px auto 0;
  }
}

@media screen and (max-width: 480px) {
  .no-backup-no-money-modal {
    padding: 20px;
    min-height: calc(100vh ~'- 20px');
    min-width: calc(100vw ~'- 20px');

    //FF ignores padding bottom fix
    &::after {
      min-height: 20px;
    }
  }
}

@media screen and (max-width: 768px) {
  .no-backup-no-money {
    .icon {
      width: 240px;
      height: 200px;
    }
  }
}